<template>
  <el-dialog :visible.sync="dialogVisible" :title="'进项发票管理'" :close-on-click-modal="false" width="1200px"  v-drag2anywhere>
    <div>
      <el-form :model="formData" ref="formData" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="内部单号:">
              {{formData.ouid}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="外部单号:">
              {{formData.ordercode}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单渠道:">
              {{formData.platform}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户单位:">
              {{formData.clientname}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单总额:">
              ¥ {{parseFloat(formData.sum_order).toFixed(2)}}
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开票总额:">
              ¥ {{parseFloat(formData.sum_platform).toFixed(2)}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合作商名称:">
              {{formData.supname}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属账套:">
              {{formData.account}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="开票明细:">
              <div style="height:200px;overflow-y: auto; border: 1px solid #E3E3E3;">
                <el-table :data="formData.goods" border>
                  <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
                  <el-table-column prop="title" label="商品名称" show-overflow-tooltip></el-table-column>
                  <el-table-column prop="model" label="规格型号"></el-table-column>
                  <el-table-column prop="unit" label="单位" width="60px" align="center"></el-table-column>
                  <el-table-column prop="count" label="数量" width="80px" align="center"></el-table-column>
                  <el-table-column prop="ptprice" label="单价" width="100px" align="center">
                    <template v-slot="scope">
                      {{scope.row.ptprice|number(3)}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="pttotal" label="小计" width="100px" align="center">
                    <template v-slot="scope">
                      {{scope.row.pttotal|number(3)}}
                    </template>
                  </el-table-column>
                  <el-table-column prop="memo" label="备注"  align="center"></el-table-column>
                </el-table>
              </div>
              <div style="text-align: right;padding: 2px 0px;border:1px solid #E3E3E3; border-top: none;">
                <span style="margin-right:15px">应开总额:{{formData.sum_platform|number(3)}}</span>
              </div>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="15">
            <el-form-item label="进项发票:" size="mini">
              <div style="text-align: right;">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleShowSupticket">添加发票</el-button>
              </div>
              <div style="border: 1px solid #E3E3E3; overflow-y: auto; height:200px">
                 <table border="0" cellspacing="0" style="width: 100%; " class="el-table">
                    <tr style="height: 20px;">
                      <td style="border:1px solid #E3E3E3;text-align: center; width: 80px;">序号</td>
                      <td style="border: 1px solid #E3E3E3;text-align: center;">发票号码或数电票号</td>
                      <td style="border: 1px solid #E3E3E3;text-align: center;">附件</td>
                      <td style="border: 1px solid #E3E3E3;text-align: center; width: 80px;"> 操作</td>
                    </tr>
                    <tr v-for="(item,index) in formData.supticket_ids" style="height: 20px; padding: 0px;">
                      <td class="el-table__cell is-center" style="border: 1px solid #E3E3E3;padding: 0px; height: 20px;">{{index+1}}</td>
                      <td class="el-table__cell is-center" style="border: 1px solid #E3E3E3;padding: 0px; height: 20px;">{{item}}</td>
                       <td style="border: 1px solid #E3E3E3;text-align: center;padding: 0px; height: 20px;">/</td>
                      <td class="el-table__cell is-center"><el-button circle type="danger" icon="el-icon-delete" title="删除发票" @click="handleRemove(index,item)" ></el-button></td>
                    </tr>
                 </table>

                  </div>

             </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-row>
                <el-col >
                   <el-form-item label="签收状态:">
                     <el-select v-model="formData.supticket_status" >
                       <el-option label="待开具" value="0"></el-option>
                       <el-option label="已签收" value="1"></el-option>
                     </el-select>
                   </el-form-item>
                </el-col>
                <el-col >
                  <el-form-item label="进项备注:">
                    <el-input  v-model="formData.supticket_statusmemo" type="textarea" :rows="8"   placeholder="进项发票状态备注信息"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-col>

         </el-row>
      </el-form>
    </div>
    <PopupSupticketFilterUI v-if="supticketfilterVisible" ref="popupSupticketFilterUI" @completeHandler="handleSelectionCallback"></PopupSupticketFilterUI>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
      <el-button type="primary" @click="handleSave" size="medium">提交保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import axios from 'axios';
  import PopupSupticketFilterUI from './PopupSupticketFilter.vue';
  export default {
    components:{
      PopupSupticketFilterUI
    },
    data() {
      return {
        index: -1,
        gwsid: '',
        formData: {
          ordercode: '',
          orderdate: ''
        },
        inputIdValue: '',
        supticket_ids: [],
        supticketfilterVisible:false,
        inputTicketIdVisible: false,
        supticket_same: '相符',
        dialogVisible: true,
        taxclassifylist: [],
        //文件上传相关变量
        upconfig: {
          //文件上传相关参数
          accept: '.jpg,.jpeg,.png',
          limit: 8,
          headers: {
            token: localStorage.getItem('token') != null ? localStorage.getItem('token') : ''
          },
          imgList: [],
          fileList: [],
          rids: [], //要删除的id
          action: axios.default.baseURL + "/upload/ticketin"
        },
      }
    },

    filters: {
      //保留2位小数点过滤器，不四五入
      number(value, n = 2) {
        //var toFixedNum=parseFloat(value).toFixed(n);
        var toFixedNum = parseFloat(value).toFixed(n);
        var realVal = toFixedNum.substring(0, toFixedNum.toString().length);
        return realVal;
      }
    },
    methods: {
      handleShowSupticket(){
        this.supticketfilterVisible=true;
        this.$nextTick(()=>{
            this.$refs.popupSupticketFilterUI.dialogVisible=true;
            this.$refs.popupSupticketFilterUI.init(this.index,this.formData.account,this.formData.supname);
        })
      },
      handleSelectionCallback(list){

        for(var i=0;i<list.length;i++){
            if(this.formData.supticket_ids.indexOf(list[i].num)==-1){
               this.formData.supticket_ids.push(list[i].num);
            }
        }

          console.log(list);
      },
      handleRemove(index,num){
          this.formData.supticket_ids.splice(index,1);
      },
      init(index, data) {
        this.index = index;
        this.formData = data;
        this.supticket_same = data.supticket_same == 1 ? '相符' : '不相符';
        this.supticket_ids = data.supticket_ids;
        this.upconfig.imgList = data.supticket_attach;
      },
      format2Number(value, len) {
        var f = parseFloat(value);
        var f = Math.round(value * 100) / 100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
          rs = s.length;
          s += '.';
        }
        while (s.length <= rs + len) {
          s += '0';
        }
        return s;
        return realVal;
      },
      handleSave: function() {
        console.log(this.formData);
        const params = {
          ouid: this.formData.ouid,
          status: this.formData.supticket_status,
          supticket_ids:this.formData.supticket_ids,
          memo: this.formData.supticket_statusmemo
        }
        this.axios.post("api/admin/order/update_supticket_binds", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.$message.success({
              message: res.data.msg,
              duration: 1500,
              showClose: true
            });
            this.dialogVisible = false;
            this.formData.supticket_same = params.supticket_same;
            this.$emit("closeHandler", this.index, params);
          } else {
            this.$message.error({
              message: res.data.msg,
              duration: 1500,
              showClose: true
            });
          }
        })
      },
    }
  }
</script>

<style>

</style>
